<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>花龙腾航 - 报表统计</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <!-- html2canvas 截图 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <!-- jsPDF 导出 PDF -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

    body {
      font-family: 'Noto Sans SC', sans-serif;
      background-color: #f8fafc;
    }

    .dashboard-card {
      transition: all 0.3s ease;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .dashboard-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }

    .logo-text {
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .user-avatar {
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    }

    .dropdown-menu {
      display: none;
      position: absolute;
      right: 0;
      top: 100%;
      background-color: white;
      border-radius: 0.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      min-width: 200px;
      z-index: 10;
    }

    .dropdown-menu.open {
      display: block;
    }

    .dropdown-item {
      padding: 0.5rem 1rem;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .dropdown-item:hover {
      background-color: #f3f4f6;
    }

    .tab-active {
      border-bottom: 3px solid #3b82f6;
      color: #3b82f6;
      font-weight: 500;
    }

    .chart-container {
      position: relative;
      height: 300px;
      width: 100%;
    }

    /* Hide data attributes initially */
    [data-thymeleaf] {
      display: none;
    }
  </style>
</head>
<body>
<!-- PDF 封面页 -->
<div id="cover-page" style="display:none; width:100%; height:100vh; background:#f8fafc; text-align:center; padding-top:20%">
  <h1 style="font-size:2rem; color:#3b82f6;">花龙腾航 - 报表统计</h1>
  <p style="color:#777;">导出时间：2025年4月5日</p>
</div>
<!-- Navigation -->
<header class="bg-white shadow-sm sticky top-0 z-10">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="flex items-center space-x-2">
      <i class="fas fa-plane text-3xl text-blue-500"></i>
      <h1 class="text-2xl font-bold logo-text">花龙腾航</h1>
    </div>
    <nav class="hidden md:flex space-x-6">
      <a href="manager_index" class="text-gray-600 hover:text-blue-500">主页</a>
      <a href="manager_flight_search" class="text-gray-600 hover:text-blue-500">航班查询</a>
      <a href="manager_order" class="text-gray-600 hover:text-blue-500">订单管理</a>
      <a href="manager_flight" class="text-gray-600 hover:text-blue-500">航班管理</a>
      <a href="#" class="text-blue-500 font-medium">报表统计</a>
    </nav>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <i class="fas fa-bell text-gray-500 text-xl cursor-pointer hover:text-blue-500"></i>
        <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
      </div>
      <div class="flex items-center space-x-2 cursor-pointer group relative" id="user-menu">
        <div class="h-8 w-8 rounded-full user-avatar flex items-center justify-center text-white">
          <i class="fas fa-user-shield"></i>
        </div>
        <span class="hidden md:inline text-gray-700 group-hover:text-blue-500" th:text="${managername}">管理员</span>
        <div class="dropdown-menu" id="dropdown-menu">
          <div class="border-t border-gray-200 my-1"></div>
          <div class="dropdown-item text-red-500" onclick="location.href='manager_logout'">
            <i class="fas fa-sign-out-alt mr-2"></i> 退出登录
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- Main Content -->
<div class="container mx-auto px-4 py-8">
  <div class="flex justify-between items-center mb-8">
    <h1 class="text-2xl md:text-3xl font-bold text-gray-800">系统报表统计</h1>
    <div class="flex items-center space-x-2">
      <!--button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md flex items-center">
        <i class="fas fa-download mr-2"></i> 导出报表
      </button-->
      <button id="export-pdf" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md flex items-center">
        <i class="fas fa-file-pdf mr-2"></i> 导出 PDF
      </button>
    </div>
  </div>

  <!-- Summary Cards -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <!-- Total Revenue Card -->
    <div class="bg-white rounded-lg p-6 dashboard-card">
      <div class="flex justify-between items-start">
        <div>
          <p class="text-gray-500">总收入</p>
          <h3 class="text-2xl font-bold text-gray-800 mt-2" th:text="'¥' + ${#numbers.formatDecimal(totalRevenue, 1, 2, 'COMMA')}">¥1,245,678</h3>
          <p class="text-sm mt-2" th:classappend="${revenueChange >= 0} ? 'text-green-500' : 'text-red-500'">
            <span th:text="${revenueChange >= 0} ? '↑' : '↓'"></span>
            <span th:text="${revenueChange != null} ? ${#numbers.formatDecimal(revenueChange, 1, 2)} + '%' : 'N/A'">8.3%</span>
            <span class="text-gray-500">较上月</span>
          </p>
        </div>
        <div class="bg-blue-100 p-3 rounded-full text-blue-600">
          <i class="fas fa-money-bill-wave text-xl"></i>
        </div>
      </div>
    </div>

    <!-- Total Orders Card -->
    <div class="bg-white rounded-lg p-6 dashboard-card">
      <div class="flex justify-between items-start">
        <div>
          <p class="text-gray-500">总订单数</p>
          <h3 class="text-2xl font-bold text-gray-800 mt-2" th:text="${totalOrders} + '笔'">3,456笔</h3>
          <p class="text-sm mt-2" th:classappend="${orderChange >= 0} ? 'text-green-500' : 'text-red-500'">
            <span th:text="${orderChange >= 0} ? '↑' : '↓'"></span>
            <span th:text="${orderChange != null} ? ${#numbers.formatDecimal(orderChange, 1, 2)} + '%' : 'N/A'">8.3%</span>
            <span class="text-gray-500">较上月</span>
          </p>
        </div>
        <div class="bg-green-100 p-3 rounded-full text-green-600">
          <i class="fas fa-shopping-cart text-xl"></i>
        </div>
      </div>
    </div>

    <!-- Total Flights Card -->
    <div class="bg-white rounded-lg p-6 dashboard-card">
      <div class="flex justify-between items-start">
        <div>
          <p class="text-gray-500">总航班数</p>
          <h3 class="text-2xl font-bold text-gray-800 mt-2" th:text="${totalFlights} + '班次'">1,234班次</h3>
          <p class="text-sm mt-2" th:classappend="${flightChange >= 0} ? 'text-green-500' : 'text-red-500'">
            <span th:text="${flightChange >= 0} ? '↑' : '↓'"></span>
            <span th:text="${flightChange != null} ? ${#numbers.formatDecimal(flightChange, 1, 2)} + '%' : 'N/A'">8.3%</span>
            <span class="text-gray-500">较上月</span>
          </p>
        </div>
        <div class="bg-purple-100 p-3 rounded-full text-purple-600">
          <i class="fas fa-plane text-xl"></i>
        </div>
      </div>
    </div>

    <!-- Total Users Card -->
    <div class="bg-white rounded-lg p-6 dashboard-card">
      <div class="flex justify-between items-start">
        <div>
          <p class="text-gray-500">总用户数</p>
          <h3 class="text-2xl font-bold text-gray-800 mt-2" th:text="${totalUsers} + '人'">12,345人</h3>
          <p class="text-sm mt-2" th:classappend="${userChange >= 0} ? 'text-green-500' : 'text-red-500'">
            <span th:text="${userChange >= 0} ? '↑' : '↓'"></span>
            <span th:text="${userChange != null} ? ${#numbers.formatDecimal(userChange, 1, 2)} + '%' : 'N/A'">8.3%</span>
            <span class="text-gray-500">较上月</span>
          </p>
        </div>
        <div class="bg-yellow-100 p-3 rounded-full text-yellow-600">
          <i class="fas fa-users text-xl"></i>
        </div>
      </div>
    </div>
  </div>

  <!-- Revenue & Orders Chart -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <div class="bg-white rounded-lg p-6 dashboard-card">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-800">收入趋势</h3>
        <div class="flex space-x-2">
          <button class="px-3 py-1 text-sm rounded-md tab-active" data-chart="revenue" data-period="month">月</button>
          <button class="px-3 py-1 text-sm rounded-md text-gray-500" data-chart="revenue" data-period="quarter">季</button>
          <button class="px-3 py-1 text-sm rounded-md text-gray-500" data-chart="revenue" data-period="year">年</button>
        </div>
      </div>
      <div class="chart-container">
        <!-- Data for Revenue Chart -->
        <div data-thymeleaf="revenue-month-labels" th:text="${#strings.listJoin(revenueMonthLabels, ',')}">1月,2月,3月,4月,5月,6月</div>
        <div data-thymeleaf="revenue-month-data" th:text="${#strings.listJoin(revenueMonthData, ',')}">120,150,180,210,240,280</div>
        <div data-thymeleaf="revenue-quarter-labels" th:text="${#strings.listJoin(revenueQuarterLabels, ',')}">Q1,Q2,Q3,Q4</div>
        <div data-thymeleaf="revenue-quarter-data" th:text="${#strings.listJoin(revenueQuarterData, ',')}">450,550,600,700</div>
        <div data-thymeleaf="revenue-year-labels" th:text="${#strings.listJoin(revenueYearLabels, ',')}">2020,2021,2022,2023</div>
        <div data-thymeleaf="revenue-year-data" th:text="${#strings.listJoin(revenueYearData, ',')}">1200,1800,2200,2800</div>

        <canvas id="revenueChart"></canvas>
      </div>
    </div>

    <div class="bg-white rounded-lg p-6 dashboard-card">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-800">订单趋势</h3>
        <div class="flex space-x-2">
          <button class="px-3 py-1 text-sm rounded-md tab-active" data-chart="orders" data-period="month">月</button>
          <button class="px-3 py-1 text-sm rounded-md text-gray-500" data-chart="orders" data-period="quarter">季</button>
          <button class="px-3 py-1 text-sm rounded-md text-gray-500" data-chart="orders" data-period="year">年</button>
        </div>
      </div>
      <div class="chart-container">
        <!-- Data for Orders Chart -->
        <div data-thymeleaf="orders-month-labels" th:text="${#strings.listJoin(ordersMonthLabels, ',')}">1月,2月,3月,4月,5月,6月</div>
        <div data-thymeleaf="orders-month-data" th:text="${#strings.listJoin(ordersMonthData, ',')}">3200,3800,4200,4500,4800,5200</div>
        <div data-thymeleaf="orders-quarter-labels" th:text="${#strings.listJoin(ordersQuarterLabels, ',')}">Q1,Q2,Q3,Q4</div>
        <div data-thymeleaf="orders-quarter-data" th:text="${#strings.listJoin(ordersQuarterData, ',')}">11200,12500,13500,15000</div>
        <div data-thymeleaf="orders-year-labels" th:text="${#strings.listJoin(ordersYearLabels, ',')}">2020,2021,2022,2023</div>
        <div data-thymeleaf="orders-year-data" th:text="${#strings.listJoin(ordersYearData, ',')}">35000,45000,52000,62000</div>

        <canvas id="ordersChart"></canvas>
      </div>
    </div>
  </div>

  <!-- Flight Statistics -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <!-- Top Routes -->
    <div class="bg-white rounded-lg p-6 dashboard-card">
      <h3 class="text-lg font-semibold text-gray-800 mb-4">热门航线</h3>
      <div class="space-y-4">
        <div th:each="route, stat : ${topRoutes}" class="flex justify-between items-center">
          <div class="flex items-center">
            <span class="text-gray-500 font-medium mr-3" th:text="${stat.index + 1}">1</span>
            <div>
              <p class="font-medium" th:text="${route.getDepartureCity()}+' → '+${route.getArrivalCity()}">北京 → 上海</p>
            </div>
          </div>
          <span class="flex items-center gap-1">
            <span class="text-sm text-gray-500">本周</span>
            <span class="text-blue-500 font-medium" th:text="${route.getFlightCount()} + '班次'">100班次</span>
          </span>
        </div>
      </div>
    </div>

    <!-- Flight Load Factor -->
    <div class="bg-white rounded-lg p-6 dashboard-card">
      <h3 class="text-lg font-semibold text-gray-800 mb-4">航班载客率</h3>
      <div class="chart-container">
        <!-- Data for Load Factor Chart -->
        <div data-thymeleaf="load-factor-data" th:text="${#strings.listJoin(loadFactorData, ',')}">85,65,50</div>

        <canvas id="loadFactorChart"></canvas>
      </div>
    </div>

    <!-- Flight Punctuality -->
    <div class="bg-white rounded-lg p-6 dashboard-card">
      <h3 class="text-lg font-semibold text-gray-800 mb-4">航班准点率</h3>
      <div class="flex items-center justify-center h-full">
        <div class="text-center">
          <div class="relative w-32 h-32 mx-auto mb-4">
            <svg class="w-full h-full" viewBox="0 0 36 36">
              <path
                      d="M18 2.0845
                     a 15.9155 15.9155 0 0 1 0 31.831
                     a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="#e6e6e6"
                      stroke-width="3"
                      stroke-dasharray="100, 100"
              />
              <path
                      d="M18 2.0845
                     a 15.9155 15.9155 0 0 1 0 31.831
                     a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="#3b82f6"
                      stroke-width="3"
                      stroke-dasharray="85, 100"
                      stroke-linecap="round"
                      id="punctuality-meter"
              />
              <text x="18" y="20.5" text-anchor="middle" font-size="6" fill="#3b82f6" font-weight="bold" th:text="${punctualityRate} + '%'">85%</text>
            </svg>
          </div>
          <p class="text-gray-500">本月平均准点率</p>
        </div>
      </div>
    </div>
  </div>

  <!-- User Statistics -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <!-- User Growth -->
    <div class="bg-white rounded-lg p-6 dashboard-card">
      <h3 class="text-lg font-semibold text-gray-800 mb-4">用户增长</h3>
      <div class="chart-container">
        <!-- Data for User Growth Chart -->
        <div data-thymeleaf="user-growth-labels" th:text="${#strings.listJoin(userGrowthLabels, ',')}">1月,2月,3月,4月,5月,6月</div>
        <div data-thymeleaf="user-growth-data" th:text="${#strings.listJoin(userGrowthData, ',')}">1200,1500,1800,2100,2400,2800</div>

        <canvas id="userGrowthChart"></canvas>
      </div>
    </div>

    <!-- User Distribution -->
    <div class="bg-white rounded-lg p-6 dashboard-card">
      <h3 class="text-lg font-semibold text-gray-800 mb-4">用户分布</h3>
      <div class="chart-container">
        <!-- Data for User Distribution Chart -->
        <div data-thymeleaf="user-distribution-labels" th:text="${#strings.listJoin(userDistributionLabels, ',')}">北京,上海,广州,深圳,成都,杭州</div>
        <div data-thymeleaf="user-distribution-data" th:text="${#strings.listJoin(userDistributionData, ',')}">3200,2800,2400,2200,1800,1500</div>

        <canvas id="userDistributionChart"></canvas>
      </div>
    </div>
  </div>
  <footer class="bg-gray-50 mt-12">
    <div class="container mx-auto px-4 py-8">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <i class="fas fa-plane text-2xl text-blue-500"></i>
            <h3 class="text-xl font-bold logo-text">花龙腾航</h3>
          </div>
          <p class="text-gray-600 text-sm">花龙腾航，让您的每一次飞行都成为美好回忆。我们致力于提供安全、舒适、便捷的航空服务。</p>
        </div>
        <div>
          <h4 class="font-bold text-gray-800 mb-4">关于我们</h4>
          <ul class="space-y-2 text-sm text-gray-600">
            <li><a href="public_company_profile" class="hover:text-blue-500 transition">公司简介</a></li>
            <li><a href="public_company_profile" class="hover:text-blue-500 transition">企业文化</a></li>
            <li><a href="public_company_profile" class="hover:text-blue-500 transition">发展历程</a></li>
            <li><a href="public_job_posting" class="hover:text-blue-500 transition">招贤纳士</a></li>
          </ul>
        </div>
        <div>
          <h4 class="font-bold text-gray-800 mb-4">帮助中心</h4>
          <ul class="space-y-2 text-sm text-gray-600">
            <li><a href="public_faq" class="hover:text-blue-500 transition">常见问题</a></li>
            <li><a href="public_baggage_regulations" class="hover:text-blue-500 transition">行李规定</a></li>
            <li><a href="public_company_profile" class="hover:text-blue-500 transition">航班动态</a></li>
            <li><a href="public_callus" class="hover:text-blue-500 transition">联系客服</a></li>
          </ul>
        </div>
        <div>
          <h4 class="font-bold text-gray-800 mb-4">联系我们</h4>
          <ul class="space-y-2 text-sm text-gray-600">
            <li class="flex items-center"><i class="fas fa-phone-alt mr-2 text-blue-500"></i> 客服热线: 19976338635</li>
            <li class="flex items-center"><i class="fas fa-envelope mr-2 text-blue-500"></i> ganshenghao888@qq.com</li>
            <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> 广东省广州市天河区华南农业大学</li>
          </ul>
          <div class="flex space-x-4 mt-4">
            <a href="https://weixin.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
              <i class="fab fa-weixin"></i>
            </a>
            <a href="https://weibo.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
              <i class="fab fa-weibo"></i>
            </a>
            <a href="https://qq.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
              <i class="fab fa-qq"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="border-t border-gray-200 mt-8 pt-6 text-center text-sm text-gray-500">
        <p>© 2025 花龙腾航航空公司 版权所有 | 京ICP备12345678号</p>
      </div>
    </div>
  </footer>
</div>

<script>
  document.getElementById('export-pdf').addEventListener('click', function () {
    const content = document.body;

    // 设置截图选项
    const opt = {
      backgroundColor: '#ffffff',
      scale: 2, // 提高清晰度
      useCORS: true // 允许跨域图片
    };

    // 使用 html2canvas 截图页面内容
    html2canvas(content, opt).then(canvas => {
      const imgData = canvas.toDataURL('image/png');

      // 创建 jsPDF 实例（A4纸张）
      const pdf = new jspdf.jsPDF({
        orientation: 'landscape', // 横向更适合报表
        unit: 'px',
        format: [canvas.width, canvas.height]
      });

      // 添加图片到 PDF
      pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);

      // 下载 PDF
      pdf.save('系统报表统计.pdf');
    });
  });


  // Toggle user dropdown menu
  document.getElementById('user-menu').addEventListener('click', function(event) {
    event.stopPropagation();
    document.getElementById('dropdown-menu').classList.toggle('open');
  });

  // Close dropdown when clicking outside
  document.addEventListener('click', function(event) {
    const dropdown = document.getElementById('dropdown-menu');
    const userMenu = document.getElementById('user-menu');

    if (!userMenu.contains(event.target) && !dropdown.contains(event.target)) {
      dropdown.classList.remove('open');
    }
  });

  // Function to get data from hidden divs
  function getThymeleafData(key) {
    const element = document.querySelector(`[data-thymeleaf="${key}"]`);
    return element ? element.textContent.split(',') : [];
  }

  // Tab switching functionality
  const tabs = document.querySelectorAll('[data-chart]');
  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      const chartType = tab.getAttribute('data-chart');
      const period = tab.getAttribute('data-period');

      // Remove active class from all tabs in this chart group
      const chartTabs = document.querySelectorAll(`[data-chart="${chartType}"]`);
      chartTabs.forEach(t => {
        t.classList.remove('tab-active');
        t.classList.add('text-gray-500');
      });

      // Add active class to clicked tab
      tab.classList.add('tab-active');
      tab.classList.remove('text-gray-500');

      // Update the chart data based on period
      updateChartData(chartType, period);
    });
  });

  // Initialize charts when DOM is loaded
  document.addEventListener('DOMContentLoaded', function() {
    // Revenue Chart
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    const revenueChart = new Chart(revenueCtx, {
      type: 'line',
      data: {
        labels: getThymeleafData('revenue-month-labels'),
        datasets: [{
          label: '收入 (万元)',
          data: getThymeleafData('revenue-month-data').map(Number),
          backgroundColor: 'rgba(59, 130, 246, 0.05)',
          borderColor: 'rgba(59, 130, 246, 1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              drawBorder: false
            }
          },
          x: {
            grid: {
              display: false
            }
          }
        }
      }
    });

    // Orders Chart
    const ordersCtx = document.getElementById('ordersChart').getContext('2d');
    const ordersChart = new Chart(ordersCtx, {
      type: 'bar',
      data: {
        labels: getThymeleafData('orders-month-labels'),
        datasets: [{
          label: '订单数',
          data: getThymeleafData('orders-month-data').map(Number),
          backgroundColor: 'rgba(16, 185, 129, 0.7)',
          borderRadius: 4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              drawBorder: false
            }
          },
          x: {
            grid: {
              display: false
            }
          }
        }
      }
    });

    // Load Factor Chart
    const loadFactorCtx = document.getElementById('loadFactorChart').getContext('2d');
    const loadFactorChart = new Chart(loadFactorCtx, {
      type: 'doughnut',
      data: {
        labels: ['经济舱', '商务舱', '头等舱'],
        datasets: [{
          data: getThymeleafData('load-factor-data').map(Number),
          backgroundColor: [
            'rgba(59, 130, 246, 0.8)',
            'rgba(16, 185, 129, 0.8)',
            'rgba(245, 158, 11, 0.8)'
          ],
          borderWidth: 0
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '70%',
        plugins: {
          legend: {
            position: 'bottom'
          }
        }
      }
    });

    // User Growth Chart
    const userGrowthCtx = document.getElementById('userGrowthChart').getContext('2d');
    const userGrowthChart = new Chart(userGrowthCtx, {
      type: 'line',
      data: {
        labels: getThymeleafData('user-growth-labels'),
        datasets: [{
          label: '新增用户',
          data: getThymeleafData('user-growth-data').map(Number),
          backgroundColor: 'rgba(139, 92, 246, 0.05)',
          borderColor: 'rgba(139, 92, 246, 1)',
          borderWidth: 2,
          tension: 0.3,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              drawBorder: false
            }
          },
          x: {
            grid: {
              display: false
            }
          }
        }
      }
    });

    // User Distribution Chart
    const userDistributionCtx = document.getElementById('userDistributionChart').getContext('2d');
    const userDistributionChart = new Chart(userDistributionCtx, {
      type: 'bar',
      data: {
        labels: getThymeleafData('user-distribution-labels'),
        datasets: [{
          label: '用户数',
          data: getThymeleafData('user-distribution-data').map(Number),
          backgroundColor: 'rgba(245, 158, 11, 0.7)',
          borderRadius: 4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              drawBorder: false
            }
          },
          x: {
            grid: {
              display: false
            }
          }
        }
      }
    });

    // Update punctuality meter
    const punctualityMeter = document.getElementById('punctuality-meter');
    const punctualityRate = document.querySelector('[data-thymeleaf="punctuality-rate"]') ?
            document.querySelector('[data-thymeleaf="punctuality-rate"]').textContent : '85';
    const dashArray = `${punctualityRate}, 100`;
    punctualityMeter.setAttribute('stroke-dasharray', dashArray);

    // Store charts in global variables for updating
    window.revenueChart = revenueChart;
    window.ordersChart = ordersChart;
  });

  // Function to update chart data based on period
  function updateChartData(chartType, period) {
    const labels = getThymeleafData(`${chartType}-${period}-labels`);
    const data = getThymeleafData(`${chartType}-${period}-data`).map(Number);

    if (chartType === 'revenue' && window.revenueChart) {
      window.revenueChart.data.labels = labels;
      window.revenueChart.data.datasets[0].data = data;
      window.revenueChart.update();
    } else if (chartType === 'orders' && window.ordersChart) {
      window.ordersChart.data.labels = labels;
      window.ordersChart.data.datasets[0].data = data;
      window.ordersChart.update();
    }
  }

  // Report period selector functionality
  document.getElementById('report-period').addEventListener('change', function() {
    const period = this.value;
    if (period === 'custom') {
      // Here you could implement a custom date range picker
      alert('请选择自定义日期范围');
    } else {
      // In a real application, you would fetch new data for the selected period
      console.log(`Selected period: ${period}`);
    }
  });

  // Export report button
  document.querySelector('button.bg-blue-500').addEventListener('click', function() {
    // In a real application, this would trigger a report download
    alert('报表导出中...');
  });
</script>
</body>
</html>